<script setup>
import { computed, ref, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'

const emits = defineEmits(['pageChange', 'xq'])
const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

// 表格列配置
const columns = ref([
  { ellipsis: false, title: '库存名称', dataIndex: 'productName', key: 'productName' },
  { ellipsis: false, title: '库存量', dataIndex: 'quantity', key: 'quantity' },
  { ellipsis: false, title: '规格列表', key: 'specs', dataIndex: 'specs' },
  { ellipsis: false, title: '单位', dataIndex: 'unit', key: 'unit' },
  { ellipsis: false, title: '操作', key: 'set', width: '100px', align: 'center' }
])

// 数据详情
const xq = (item) => {
  emits('xq', item)
}

provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="xq(record)">详情</AButton>
      </template>
    </template>
  </MyTable>
</template>